<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>全部科室</title>
    <script src="js/tagetUrl.js"></script>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <script>
        $(function () {
            $.ajax({
                type: "get",
                url: targetUrl + "/wechat114/getAllMainDepartment",
                dataType: "json",
                success(data) {
                    if (data.code === 1) {
                        $(".type-left-list").empty();
                        for (var i = 0; i < data.data.length; i++) {
                            if (i === 0) {
                                $(".type-left-list")
                                    .append("<div class='type-left-item type-active' id=" + data.data[i].id + ">" +
                                        "<i></i>" +
                                        "<a href='javascript:;' >" + data.data[i].deptName + "</a>" +
                                        "</div>");
                            } else {
                                $(".type-left-list")
                                    .append("<div class='type-left-item' id=" + data.data[i].id + ">" +
                                        "<i></i>" +
                                        "<a href='javascript:;'>" + data.data[i].deptName + "</a>" +
                                        "</div>");
                            }

                        }

                    }
                }
            })
            $.ajax({
                type: "get",
                url: targetUrl + "/wechat114/getAllSecondDepartment",
                data: {"deptId": 1},
                dataType: "json",
                success(data) {
                    $(".type-right-list").empty();
                    for (var i = 0; i < data.data.length; i++) {
                        $(".type-right-list")
                            .append("<div className='type-right-item'>" +
                                "<a href='type.html?" + data.data[i].id + "'>" + data.data[i].deptName + "</a>" +
                                "</div>");
                    }
                }
            })
            $.ajax({
                type: "get",
                url: targetUrl + "/wechat114/selectAllDepartment",
                dataType: "json",
                success(data) {
                    var hospitals = data.data;
                    if (data.code === 1) {
                        for (var i = 0; i < hospitals.length; i++) {
                            $(".div_items")
                                .append(" <div class=\"div_item\" hidden ><a href='type.html?id=" + hospitals[i].id + "'><i class=\"aui-iconfont aui-icon-search\"></i>" + hospitals[i].deptName + "</a></div>");

                        }
                        $("#div_item").css('display', 'block');
                    }

                }
            })
        })

    </script>
</head>
<body>
<div class="search-container search-fixed">
    <div class="search-wrapper">
        <div class="search-icon">
            <i class="aui-iconfont aui-icon-search"></i>
        </div>
        <div class="search-input">
            <input id="txt1" placeholder="搜索科室" autocomplete="off"/>
        </div>
        <input value="取消" id="input1" style="margin-left: 40%; display: none">
    </div>
</div>

<div class="type-container">
    <div class="type-left">
        <div class="type-left-list">
            <!--            <div class="type-left-item type-active">-->
            <!--                <i></i>-->
            <!--                <a href="javascript:;">核酸检测</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">全科医疗科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">内科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">外科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">重症医学科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">急症介入科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">肿瘤科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">妇产科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">儿科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">小儿外科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">眼科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">耳鼻喉头颈外科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">口腔科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">皮肤科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">医疗美容科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">精神科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">结核病科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">地方病科</a>-->
            <!--            </div>-->
            <!--            <div class="type-left-item">-->
            <!--                <a href="javascript:;">康复医学科</a>-->
            <!--            </div>-->
        </div>
    </div>
    <div class="type-right">
        <div class="type-right-list">
            <div class="type-right-item">
                <a href="type.html"></a>
            </div>
        </div>
    </div>
</div>
<div id="div_item">
    <div class="div_items">

    </div>
</div>
<script>
    $('.type-left-list').delegate('.type-left-item', "click", function () {
        $.ajax({
            type: "get",
            url: targetUrl + "/wechat114/getAllSecondDepartment",
            data: {"deptId": this.id},
            dataType: "json",
            success(data) {
                $(".type-right-list").empty();
                for (var i = 0; i < data.data.length; i++) {
                    $(".type-right-list")
                        .append("<div className='type-right-item'>" +
                            "<a href='type.html?" + data.data[i].id + "'>" + data.data[i].deptName + "</a>" +
                            "</div>");
                }
            }
        })
    })


    $('.type-left-list').delegate('.type-left-item', 'click', function () {
        $('.type-left-item').removeClass('type-active');
        $(this).addClass('type-active');
    })

    $('.type-left-item').click(function () {
        $('.type-left-item').removeClass('type-active');
        $(this).addClass('type-active');
    })


    //弹出列表框
    $("#txt1").click(function () {
        hidediv();
        $("#div_items").css('display', 'block');
        return false;
    });
    //隐藏列表框
    $("body").click(function () {
        $("#div_items").css('display', 'none');

    });
    //移入移出效果
    $(".div_item").hover(function () {
        $(this).css('background-color', '#1C86EE').css('color', 'white');
    }, function () {
        $(this).css('background-color', 'white').css('color', 'black');
    });
    //文本框输入
    $("#txt1").keyup(function () {


        $("#div_items").css('display', 'block');//只要输入就显示列表框
        if ($("#txt1").val().length <= 0) {
            $(".div_item").css('display', 'none');//如果什么都没填，跳出，保持全部显示状态
            return;
        }
        $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏

        for (var i = 0; i < $(".div_item").length; i++) {

            //模糊匹配，将所有匹配项显示
            if ($(".div_item").eq(i).text().indexOf($("#txt1").val()) >= 0) {
                $(".div_item").eq(i).css('display', 'block');
            }
        }
    });
    //项点击
    $(".div_item").click(function () {
        $("#txt1").val($(this).text());
    });

    function hidediv() {
        $(".type-left").hide();
        $(".type-right").hide();
        $("#input1").css('display', 'block');
    }

    $("#input1").click(function () {
        $(".type-left").show();
        $(".type-right").show();
        $("#input1").css('display', 'none');
        for (var i = 0; i < $(".div_item").length; i++) {
            //模糊匹配，将所有匹配项显示
            if ($(".div_item").eq(i).text().indexOf($("#txt1").val()) >= 0) {
                $(".div_item").eq(i).css('display', 'none');
            }
        }
        $("#txt1").val("");
    })
</script>
</body>
</html>
